I will delete the new layout components again, they are here for testing

why using ignore ts here?

Because this is a valid attribute, but I think pwa kit has the latest state of that yet, neither has the commerce-sdk. I should probably fix that, but I am not sure what the process is. Can you help me with that?

I made it less ugly and not use a ts-ignore though

What are the ways to tests if Suspense can render fallback component? Correctly if I am wrong, but pwa-kit is currently SSR and not support streaming at all. Using Suspense will probably not work for pwa-kit.

oh, you're right. I changed it to only render in that suspense on the client. not sure whether this would be best practice here. I could also just remove it if you want

You can simply return the it with a div wrapper

<div>
{componentElement}
</div>

Let's keep the displayName (which existing in other components, it is to make it easier for debugging)
Component.displayName = 'Component'

Why can't this component be part of commerce-sdk-react or/and be part of PageDesignerProvider?

I am thinking on the UX for dev when they need to integrate PD to the template, they have to set up two things, one is the PageDesignerProvider and PageDesignerInit to get it works? Is there way we can set up so they can simply do one step?

const App = () = {
   return <PageDesignerSetup />  
 }

// commermce-react-sdk

const  PageDesignerSetup = () => {
    // everything needed to init PD for template. E.g
          <PageDesignerProvider clientId="pwa-kit" targetOrigin="*" usid={usid}>
             <PageDesignerInit />
            <YourAppContent />
         </PageDesignerProvider>
   
}

The page designer init code has a dependency to react-router, which is something I didn't want to pull into the commerce-sdk